<template>
	<view class="personal-info-page">
		<view class="up-view">
			<view class="custom-navbar">
<!-- 				<view class="nav-left" @click="goBack">
					<global-arrow direction="left" :size="29" color="#fff"></global-arrow>
				</view>
				<view class="nav-title">
					<text>信息修改</text>
				</view>
				<view class="nav-right">
				</view> -->
			</view>
		</view>

		<!-- 信息列表 -->
		<view class="info-list">
			<view class="cardUp">
				<view class="nav-right">
					<!-- 取消和确认按钮 -->
					<text class="cancel-btn" @click="cancelEdit">取消</text>
					<text class="confirm-btn" @click="confirmEdit">确认</text>
				</view>
				<!-- 头像选择区域 -->
				<view class="avatar-select">
					<!-- 头像列表 -->
					<view v-for="(avatar, index) in avatarList" :key="index" class="avatar-item"
						@click="selectAvatar(index)">
						<image class="avatar-img" :src="avatar.url" mode="aspectFill"></image>
						<view class="avatar-radio" :class="{ 'avatar-radio-checked': selectedAvatarIndex === index }">
						</view>
					</view>
					<!-- 若有临时图片，显示图片 + 删除按钮 -->
					<view v-if="tempAvatarUrl" class="upload-preview" @click="previewAvatar">
						<image :src="tempAvatarUrl" mode="aspectFill"></image>
						<view class="delete-btn" @click.stop="deleteAvatar">
							<uni-icons type="clear" color="#fff" size="24"></uni-icons>
						</view>
					</view>
					<!-- 若无临时图片，显示上传按钮 -->
					<view v-else class="upload-btn upload-btn-1" @click="chooseAvatar">
						<uni-icons type="plusempty" color="#bebebe" size="20"></uni-icons>
						<text>上传照片</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				avatarList: [{
						url: '/static/images/1.jpg'
					},
					{
						url: '/static/images/2.png'
					},
					{
						url: '/static/images/3.png'
					},
					{
						url: '/static/images/4.png'
					}, {
						url: '/static/images/5.png'
					},
					{
						url: '/static/images/6.png'
					},
					{
						url: '/static/images/7.png'
					},
					{
						url: '/static/images/8.png'
					},
				],
				selectedAvatarIndex: 0, // 默认选中第一个头像
				tempAvatarUrl: '', // 临时存储上传的头像地址
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},

			cancelEdit() {
				// 取消编辑逻辑，可重置状态等
				uni.navigateTo({
					url:"/my/pages/userInfo/userInfo"
				})
			},
			confirmEdit() {
				// 确认编辑逻辑，保存选中的头像等
				uni.showToast({
					title: '修改成功',
					icon: 'success',
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			selectAvatar(index) {
				this.selectedAvatarIndex = index;
			},
			chooseAvatar() {
				// 选择头像逻辑，调用uni.chooseImage等API
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.tempAvatarUrl = tempFilePath;
						// 这里可将图片上传到服务器，保存永久地址，若只是临时预览，可直接替换头像列表对应项
						// 示例：临时预览，不修改头像列表
						this.selectedAvatarIndex = -1; // 标记为自定义上传的头像
					},
				});
			},
			// 预览图片
			previewAvatar() {
				uni.previewImage({
					urls: [this.tempAvatarUrl], // 预览的图片数组
					current: this.tempAvatarUrl // 当前显示的图片
				});
			},
			// 删除图片（清空临时地址）
			deleteAvatar() {
				this.tempAvatarUrl = '';
			},
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 250rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}

	.personal-info-page {
		background-color: #f5f5f5;
		height: 100vh;
	}


	.info-list {
		margin-top: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx;
	}

	.cardUp {
		margin-top: -260rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	/* 原有样式保持不变，新增以下样式 */
	.nav-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 20rpx 20rpx;
		font-size: 26rpx;

	}

	.cancel-btn {
		color: #333;
		margin-right: 30rpx;
	}

	.confirm-btn {
		color: #1890ff;
	}

	.avatar-select {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 20rpx 30rpx;
		gap: 20rpx;
	}

	.avatar-item {
		position: relative;
		width: 170rpx;
		height: 170rpx;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.avatar-radio {
		position: absolute;
		top: 0;
		right: 0;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		background-color: rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.avatar-radio-checked {
		background-color: #1890ff;
	}

	.upload-btn {
		width: 170rpx;
		height: 170rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.upload-btn text {
		font-size: 24rpx;
		color: #bebebe;
	}
	.upload-preview {
	  width: 170rpx;
	  height: 170rpx;
	  position: relative;
	}
	.upload-preview image {
	  width: 170rpx;
	  height: 170rpx;
	  border-radius: 10rpx;
	}
	
	.delete-btn {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 30rpx;
	  height: 30rpx;
	  border-radius: 50%;
	  background-color: rgba(0, 0, 0, 0.7);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
</style>